<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<script src="lib/easeljs-0.7.1.min.js" type="text/javascript"></script>
	<script src="lib/tweenjs-0.5.1.min.js" type="text/javascript"></script>
</head>
<body>
	<canvas id="mycanvas" width="600px" height="800px" style="border:1px solid #ccc"></canvas>

</body>
</html>
<script type="text/javascript">
	var stage = new createjs.Stage("mycanvas");
	var mycanvas = new createjs.Container();
	stage.addChild(mycanvas)

	var s = new createjs.Shape();
	// s.graphics.beginFill("#ff0000").drawCircle(50,50,25).endFill();
	mycanvas.addChild(s);
	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener('tick',function(){
		stage.update()
	})

	function Circle() {
		createjs.Shape.call(this);
		this.setCircleType = function (type) {
			this._circleType = type;
			switch(type){
				case 1:
					this.setColor("#cccccc");
					break;
				case 2:
					this.setColor("#ff6600");
					break;
				case 3:
					this.setColor("#0000ff");
					break;

			}
		}

		this.setColor = function (colorString) {
			this.graphics.beginFill(colorString);
			this.graphics.drawCircle(0,0,25);
			this.graphics.endFill();
		}

		this.getCircleType = function () {
			return this._circleType
		}

		this.setCircleType(1);
	}
	Circle.prototype = new createjs.Shape();
	Circle.TYPE_UNSELECTED =1;
	Circle.TYPE__SELECTED =2;
	Circle.TYPE_CAT =3;


	mycanvas.x =30;
	mycanvas.y =30;
	var circleArr = [[],[],[],[],[],[],[],[],[]]
	var Move_none = -1,Move_left = 0,Move_up_left =1,Move_up_right =2, Move_right =3,Move_right_down=4,Move_left_down = 5;

	function getMovedir(cat){
		var distanceMap = []
		//left
		can =true
		for (var x = cat.indexX; x >= 0; x--) {
			if (circleArr[x][cat.indexY].getCircleType()==Circle.TYPE__SELECTED) {
				can = false;
				distanceMap[Move_left]=cat.indexX-x;
				break;
			}
		}
		if (can) {
			return Move_left;
		}

		//up_left
		can = true
		x = cat.indexX;
		y=cat.indexY;
		while(true){
			if(circleArr[x][y].getCircleType()==Circle.TYPE__SELECTED){
				can =false;
				distanceMap[Move_up_left] = cat.indexY-y;
				break;
			}
			if(y%2==0){
				x--
			}
			y--
			if(x<0 || y<0){
				break
			}
		}
		if (can) {
			return Move_up_left
		}

		// up_right
		can = true
		x = cat.indexX;
		y=cat.indexY;
		while(true){
			if(circleArr[x][y].getCircleType()==Circle.TYPE__SELECTED){
				can =false;
				distanceMap[Move_up_right] = cat.indexY-y;
				break;
			}
			if(y%2==1){
				x++
			}
			y--
			if(x>8 || y<0){
				break
			}
		}
		if (can) {
			return Move_up_right
		}

		//right
		can =true
		for (var x = cat.indexX; x <= 8; x++) {
			if (circleArr[x][cat.indexY].getCircleType()==Circle.TYPE__SELECTED) {
				can = false;
				distanceMap[Move_left]=x-cat.indexX;
				break;

			}
		}
		if (can) {
			return Move_right;
		}

		//right_down
		can = true
		x = cat.indexX;
		y = cat.indexY;
		while(true){
			if(circleArr[x][y].getCircleType()==Circle.TYPE__SELECTED){
				can =false;
				distanceMap[Move_right_down] = y-cat.indexY;
				break;
			}
			if(y%2==1){
				x++
			}
			y++
			if(x>8 || y>8){
				break
			}
		}
		if (can) {
			return Move_right_down
		}

		//left_down
		can = true
		x = cat.indexX;
		y = cat.indexY;
		while(true){
			if(circleArr[x][y].getCircleType()==Circle.TYPE__SELECTED){
				can =false;
				distanceMap[Move_up_left] = y-cat.indexY;
				break;
			}
			if(y%2==0){
				x--
			}
			y++
			if(x<0 || y>8){
				break
			}
		}
		if (can) {
			return Move_left_down
		}



	}


	function addCircles() {
		for (var indexX = 0; indexX < circleArr.length; indexX++) {
			for (var indexY = 0; indexY < 9; indexY++) {
				var c = new Circle();
				mycanvas.addChild(c);
				circleArr[indexX][indexY] = c;
				c.indexX = indexX;
				c.indexY = indexY;
				c.x = indexX*55;
				c.y = indexY*55;


				if(indexX == 4 && indexY == 4){
					c.setCircleType(3);
					currentCat = c;
				}else if (Math.random()<0.15) {
					c.setCircleType(2)
				}

				c.addEventListener('click',circleCliked)
			}
		}
	}

	addCircles();

	function circleCliked(e) {
		// if (e.target.getCircleType() != Circle.TYPE_CAT && e.target.getCircleType() != Circle.TYPE__SELECTED) {
			// e.target.setCircleType(Circle.TYPE__SELECTED)
		if (e.target.getCircleType() != Circle.TYPE_CAT){e.target.setCircleType(Circle.TYPE__SELECTED);} 
		else{return;
		if(currentCat.indexX == 0 || currentCat.indexX==8 ||currentCat.indexY == 0 || currentCat.indexY==8){
			alert("game over");
			return;
		}


		var dir	 = getMovedir(currentCat)
		switch(dir){
			case 0:
				currentCat.setCircleType(Circle.TYPE__UNSELECTED)
				currentCat = circleArr[currentCat.indexX-1][currentCat.indexY]
				currentCat.setCircleType(Circle.TYPE_CAT);
				break;
			case 1:
				currentCat.setCircleType(Circle.TYPE__UNSELECTED)
				currentCat = circleArr[currentCat.indexX-1][currentCat.indexY-1];
				currentCat.setCircleType(Circle.TYPE_CAT);
				break;
			case 2:
				currentCat.setCircleType(Circle.TYPE__UNSELECTED)
				currentCat = circleArr[currentCat.indexX+1][currentCat.indexY-1];
				currentCat.setCircleType(Circle.TYPE_CAT);
				break;
			case 3:
				currentCat.setCircleType(Circle.TYPE__UNSELECTED)
				currentCat = circleArr[currentCat.indexX+1][currentCat.indexY];
				currentCat.setCircleType(Circle.TYPE_CAT);
				break;
			case 4:
				currentCat.setCircleType(Circle.TYPE__UNSELECTED)
				currentCat = circleArr[currentCat.indexX+1][currentCat.indexY+1];
				currentCat.setCircleType(Circle.TYPE_CAT);
				break;
			case 5:
				currentCat.setCircleType(Circle.TYPE__UNSELECTED)
				currentCat = circleArr[currentCat.indexX-1][currentCat.indexY+1];
				currentCat.setCircleType(Circle.TYPE_CAT);
				break;
			default:
			alert("game over")
		}		
	}
</script>